<template>
    <div class="border">
        <el-input class="elinput" v-model="studentselect" placeholder="请输入内容"></el-input>
        <el-dropdown>
  <span class="el-dropdown-link">
    <span v-if="query==''">查询条件</span> <span v-else-if="query=='sId'">学号</span> <span
          v-else-if="query=='sName'">学生名</span> <span v-else-if="query=='sClass'">班级</span><i
          class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="query ='sId'">学号</el-dropdown-item>
                    <el-dropdown-item @click="query ='sName'">学生名</el-dropdown-item>
                    <el-dropdown-item @click="  query ='sClass'">班级</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-button @click="querystudent" type="info" plain><i class="el-icon-search"></i></el-button>
        <el-button type="primary" @click="dialogFormVisible = true,statu='',form={}"
        >添加学生
        </el-button>


        <el-dialog :title="statu==''?'添加学生':'修改学生'" v-model="dialogFormVisible">
            <el-form :model="form">

                <el-form-item label="学生名" :label-width="formLabelWidth">
                    <el-input v-model="form.sName" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.sex" placeholder="请选择学生性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学生密码" :label-width="formLabelWidth">
                    <el-input v-model="form.pwd" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="电话号码" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="学生班级" :label-width="formLabelWidth">
                    <el-input v-model="form.sClass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="学生年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="statu=='update'" type="primary" @click="updatestu">确 定</el-button>
      <el-button v-if="statu==''" type="primary" @click="addStudent">确 定</el-button>
    </span>
            </template>
        </el-dialog>


        <!--        {{studentList}}-->
        <el-button v-if="deletestu.length != 0"
                   style="margin-left: 500px"
                   size="mini"
                   type="danger"
                   @click="handleDelete()"
        >删除
        </el-button>
        <el-table
                border
                :data="studentList"
                stripe
                style="width: 95%; margin: 20px"
        >
            <el-table-column prop="sId" label="学号" width="80"></el-table-column>
            <el-table-column prop="sName" label="学生名" width="120"></el-table-column>
            <el-table-column prop="pwd" label="密码" width="120"></el-table-column>
            <el-table-column prop="sex" label="性别" width="100"></el-table-column>
            <el-table-column prop="sClass" label="学生班级"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="age" label="学生年龄"></el-table-column>
            <el-table-column label="操作" width="250">
                <template #default="scope">
                    <el-button size="mini" @click="detailsStu(scope.$index, scope.row)"
                    >详情
                    </el-button
                    >
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                    >删除
                    </el-button
                    >
                    <el-checkbox
                            style="margin-left: 10px"
                            v-model="studentList[scope.$index].checked"
                    ></el-checkbox>
                </template>
            </el-table-column>
        </el-table>

        <div class="sort"><span :style="sorts=='zheng'?'color:green; font-size:16px':''" class="sortleft" @click="sortzheng">正序</span>/<span @click="sortdao" :style="sorts=='dao'?'color:green; font-size:16px':''" class="sortright">倒序</span></div>
        <el-pagination

                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                v-model:currentPage="currentPage1"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="totalsize"
        >
        </el-pagination>
    </div>
</template>


<script>
    import {
        getStudentByclass,
        getStudentByname,
        getStudentByid,
        getStudent,
        addstudent,
        studentdelete,
        updatestudent
    } from "../network/student";
    import {mapState} from "vuex";

    export default {
        computed: {
            ...mapState(['stuId'])
        },
        watch: {
            studentList: {
                handler(Nval) {
                    this.studentList = Nval;
                    this.deletestu = []
                    for (let i = 0; i < this.studentList.length; i++) {
                        if (this.studentList[i].checked == true) {
                            if (this.deletestu.indexOf(this.studentList[i].sId) == -1) {
                                this.deletestu.push(this.studentList[i].sId)
                            }
                        }

                    }
                    console.log(this.deletestu);
                },
                immediate: true,
                deep: true,
            },
            // query(Nval){
            //   console.log(Nval)
            // }


        },
        created() {
            this.getStudent();
        },
        data() {
            return {
                sort:'0',
                sorts:'zheng',
                query: '',
                deletestu: [],
                studentList: [],
                currentpage: "1",
                pagesize: "6",
                totalpage: "",
                totalsize: "",
                studentselect: "",
                dialogFormVisible: false,
                statu: '',
                form: {
                    sId: '',
                    sName: "",
                    pwd: '',
                    sex: "",
                    phone: "",
                    delivery: false,
                    type: [],
                    resource: "",
                    age: "",
                },
                formLabelWidth: "120px",
            };
        },

        methods: {
            detailsStu(i){
                this.$store.commit('changestuId',this.studentList[i].sId)
                this.$router.push('/querystudent')
            },
            sortzheng(){
                this.sorts='zheng'
                this.sort='0'
                this.querystudent()
            },
            sortdao(){
                this.sorts='dao'
                this.sort='1'
                this.querystudent()

            },
            updatestu() {
                updatestudent(this.form).then((res) => {
                    if (res.data == true) {
                        alert("修改成功")
                        this.getStudent()
                    } else {
                        alert("no")
                    }
                    this.dialogFormVisible = false
                    this.statu = ''
                })
            },
            handleEdit(i) {
                this.form = this.studentList[i]
                this.dialogFormVisible = true
                this.statu = 'update'
            },
            handleDelete(i) {
                if (this.deletestu.length == 0) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        studentdelete(this.studentList[i].sId).then(() => {
                            this.getStudent()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        studentdelete(this.deletestu.toString()).then(() => {
                            this.getStudent()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            handleSizeChange(val) {
                console.log(val)
            },
            handleCurrentChange(val) {
                this.currentpage = val;
                this.getStudent()
                // getStudent("",this.currentpage, this.pagesize).then((res) => {
                //   console.log(res);
                //   this.studentList = res.data.students;
                // });
            },

            getStudent() {
                getStudent(this.currentpage, this.pagesize,this.sort).then((res) => {
                    this.studentList = res.data.students;
                    this.totalpage = res.data.totalPage;
                    this.totalsize = res.data.totalSize;
                    for (let i = 0; i < this.studentList.length; i++) {
                        this.studentList[i]["checked"] = false;
                    }
                });
            },
            addStudent() {
                console.log(this.form);
                addstudent(this.form.age, this.form.phone, this.form.pwd, this.form.sClass, this.form.sName, this.form.sex).then((res) => {
                    if (res.data == true) {
                        alert("添加成功")
                        this.getStudent()
                    }

                })
                this.dialogFormVisible = false
            },
            querystudent() {
                if (this.query == '' || this.query == 'sName') {
                    getStudentByname(this.studentselect, this.currentpage, this.pagesize,this.sort).then((res) => {
                        this.studentList = res.data.students;
                        this.totalpage = res.data.totalPage;
                        this.totalsize = res.data.totalSize;
                        for (let i = 0; i < this.studentList.length; i++) {
                            this.studentList[i]["checked"] = false;
                        }
                    });
                } else if (this.query == 'sId') {
                    getStudentByid(this.studentselect, this.currentpage, this.pagesize,this.sort).then((res) => {
                        this.studentList = res.data.students;
                        this.totalpage = res.data.totalPage;
                        this.totalsize = res.data.totalSize;
                        for (let i = 0; i < this.studentList.length; i++) {
                            this.studentList[i]["checked"] = false;
                        }
                    });
                } else {
                    getStudentByclass(this.studentselect, this.currentpage, this.pagesize,this.sort).then((res) => {
                        this.studentList = res.data.students;
                        this.totalpage = res.data.totalPage;
                        this.totalsize = res.data.totalSize;
                        for (let i = 0; i < this.studentList.length; i++) {
                            this.studentList[i]["checked"] = false;
                        }
                    });
                }

            }
        },
    };
</script>

<style>
    .sortleft{
        margin-right: 5px;
        cursor: pointer;
    }
    .sortright{
        margin-left: 5px;
        cursor: pointer;
    }
    .sort{
        margin-left: 20px;
        font-size: 14px;
    }
    .border {
        width: 1220px;
        height: 600px;
        background-color: white;
    }

    .elinput {
        margin: 10px;
        margin-right: -3px;
        width: 400px;
    }

    .el-pagination {
        float: right;
        margin: 20px;
    }

    .el-dropdown {
        position: absolute;
        top: 25%
    }
</style>



